import clsx from 'clsx';
import st from '../style.module.scss';

export type IRow = {
  tittle: string;
  key: string;
  children?: IRow[];
};

interface Props {
  item: IRow;
  sigle?: boolean;
}

const RowItem = ({ item, sigle }: Props) => {
  const cLength = item?.children?.length ?? 0;
  return (
    <div
      key={item.key}
      className={clsx('flex items-center pl-4 relative', !sigle && st.node)}
      style={{ '--bcolor': 'red' } as React.CSSProperties}
    >
      <span className={clsx('text-base', st.tittle)}>{item.tittle}</span>
      <div className="flex flex-col mx-2">
        {item?.children?.map((it, i) => (
          <RowItem key={`${i}_${item.key}`} item={it} sigle={cLength <= 1} />
        ))}
      </div>
    </div>
  );
};

export default RowItem;
